import React, { useState, useEffect } from 'react';
import { Layout, Table, Button, Row, Col, DatePicker, Space, Tag, notification, Input, Switch, Tooltip } from 'antd';
import SelectProject from './project/project_select';
import SelectDynamicType from '../general/type_select';
import { fetchApi } from '../general/api';
import dayjs, { Dayjs } from 'dayjs';
import isBetween from 'dayjs/plugin/isBetween';
import { RedoOutlined } from '@ant-design/icons';

dayjs.extend(isBetween);

const { Content } = Layout;
const { RangePicker } = DatePicker;

// 定义告警列表的接口  
interface AlarmListOption {
    alarm_config_id: string;
    alarm_event_id: string;
    name: string;
    alert_type_name: string;
    alarm_config_level_type: string;
    address: string;
    project_name: string;
    project_id: string;
    info: string;
    create_time: string; // ISO 格式的日期字符串  
}

// 定义表格列  
const columns = [
    {
        title: null, // 隐藏列无需标题
        dataIndex: 'alarm_config_level_type', // 用来过滤的数据字段
        render: () => null, // 不渲染内容
        width: 0, // 宽度设为 0
    },
    {
        title: '告警名称',
        dataIndex: 'alarm_config_name',
        width: 80,
        ellipsis: true // 启用省略号  
    },
    {
        title: '项目',
        dataIndex: 'project_name',
        width: 30,
        ellipsis: true // 启用省略号  
    },
    {
        title: '探测值',
        dataIndex: 'alarm_event_result_status',
        width: 30,
        ellipsis: true // 启用省略号  
    },
    {
        title: '告警级别',
        dataIndex: 'alert_type_name',
        width: 50,
        ellipsis: true,
        render: (_: any, record: { alert_type_name: string }) => {
            const { alert_type_name } = record;

            let color: string;
            switch (alert_type_name) {
                case '紧急':
                    color = 'red';
                    break;
                case '重要':
                    color = 'orange';
                    break;
                case '提醒':
                    color = 'blue';
                    break;
                case '一般':
                    color = 'green';
                    break;
                default:
                    color = 'gray';
            }

            return (
                <Tag color={color} key={alert_type_name}>
                    {alert_type_name.toUpperCase()}
                </Tag>
            );
        },
    },
    {
        title: '检测到信息',
        dataIndex: 'alarm_event_result',
        width: 200,
        ellipsis: true,
    },
    {
        title: '源',
        dataIndex: 'alarm_config_group_url',
        width: 100,
        ellipsis: true,
    },
    {
        title: '始',
        dataIndex: 'alarm_event_time',
        width: 80,
        ellipsis: true,
    },
    {
        title: '终',
        dataIndex: 'alarm_event_time',
        width: 80,
        ellipsis: true,
    },
    {
        title: '反复次数',
        dataIndex: 'alarm_count',
        width: 40,
        ellipsis: true,
    }
];

const App: React.FC = () => {
    const [dataSource, setDataSource] = useState<AlarmListOption[]>([]);
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const [selectedProject, setselectedProject] = useState<string | undefined>(undefined);
    const [selectedAlerType, setselectedAlerType] = useState<string | undefined>(undefined);
    const [pageSize, setPageSize] = useState(15); // 每页显示的条目数量为15  
    const [dateRange, setDateRange] = useState<[Dayjs, Dayjs] | null>(null); // 使用 Dayjs 处理日期范围  
    const [fetchInterval, setFetchInterval] = useState<number | null>(null); // 控制获取数据的间隔  
    const [isAutoFetch, setIsAutoFetch] = useState<boolean>(false); // 控制开关状态

    // 请求告警列表数据  
    const fetchProjectOptions = async () => {
        try {
            const response = await fetchApi('/easymonitor/api/alert_list'); // 使用 fetchApi  
            setDataSource(response); // 更新数据源  
            notification.success({
                message: '请求成功', description: '告警数据更新成功。', duration: 2 // 2秒后自动关闭  
            });
        } catch (error) {
            notification.error({
                message: '请求失败', description: '项目数据查询失败:' + error, duration: 2
            });
        }
    };

    // 已确认告警原因，取消告警
    const alertConfirmOptions = async (alarm_config_id: string) => {
        try {
            // 修改为 PUT 请求，并传递 alarm_event_id 作为请求体
            const response = await fetchApi('/easymonitor/api/alert_confirm', {
                method: 'PUT',
                body: JSON.stringify({ alarm_config_id }),  // 将 alarm_event_id 放入请求体
            });

            setDataSource(response); // 更新数据源

            notification.success({
                message: '请求成功',
                description: '告警数据更新成功。',
                duration: 2 // 2秒后自动关闭
            });
        } catch (error) {
            notification.error({
                message: '请求失败',
                description: '项目数据查询失败: ' + error,
                duration: 2
            });
        }
    };


    // 设置定时器，自动获取数据  
    useEffect(() => {
        let interval: NodeJS.Timeout | null = null; // 定义一个定时器变量  
        if (isAutoFetch && fetchInterval !== null) {
            interval = setInterval(() => {
                fetchProjectOptions(); // 每隔指定时间自动调用  
            }, fetchInterval * 1000); // 将秒转换为毫秒  
        }

        return () => {
            if (interval) {
                clearInterval(interval); // 清除定时器  
            }
        };
    }, [isAutoFetch, fetchInterval]); // 依赖于 isAutoFetch 和 fetchInterval  

    // 处理输入框变化  
    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const value = parseInt(e.target.value, 10); // 转换为数字  
        setFetchInterval(isNaN(value) ? null : value); // 若不是数字则设置为 null  
    };

    useEffect(() => {
        fetchProjectOptions(); // 组件渲染时请求一次数据  
    }, []);


    // 根据过滤条件生成过滤后的数据  
    const filteredData = dataSource.filter(item => {

        const projectMatch = selectedProject ? item.project_id === selectedProject : true;
        // const alerTypeMatch = selectedAlerType ? item.alert_type_name === selectedAlerType : true;
        const alerTypeMatch = selectedAlerType ? item.alarm_config_level_type === selectedAlerType : true;


        // 处理日期范围过滤  
        const createdAt = dayjs(item.create_time); // 假设 created_at 是 ISO 格式的日期字符串  
        const dateMatch = dateRange ? createdAt.isBetween(dateRange[0], dateRange[1], null, '[]') : true; // 这里处理 null  

        return projectMatch && alerTypeMatch && dateMatch;
    });

    const handleDelete = async () => {
        // 使用 await 确保 alertConfirmOptions 执行完毕后再执行后续操作
        const newDataSource = [];

        for (const item of dataSource) {
            if (selectedRowKeys.includes(item.alarm_event_id)) {
                await alertConfirmOptions(item.alarm_config_id); // 等待确认操作
            } else {
                newDataSource.push(item);  // 将未选中的项加入新数组
            }
        }

        setDataSource(newDataSource);
        setSelectedRowKeys([]);  // 清空选中行
    };

    // 处理项目选择  
    const handleProjectChange = (value: string) => {
        setselectedProject(value); // 如果选择 ALL 则设置为 undefined  
    };

    // 处理告警类型选择  
    const handleAlerTypeChange = (value: string | null) => {
        console.log(value)
        setselectedAlerType(value === null || value === '' ? undefined : value); // 将空值处理为 undefined
    };

    const handleDateRangeChange = (dates: [Dayjs | null, Dayjs | null] | null) => {
        if (dates === null) {
            setDateRange(null);
        } else if (dates[0] && dates[1]) {
            setDateRange([dates[0] as Dayjs, dates[1] as Dayjs]);
        }
    };

    const rowSelection = {
        selectedRowKeys, // 选中的行的键  
        onChange: (newSelectedRowKeys: React.Key[]) => {
            setSelectedRowKeys(newSelectedRowKeys); // 更新选中的行  
        },
        columnWidth: 15 // 设置选中列的宽度  
    };

    return (
        <Layout>
            <Content>
                <div style={{ marginBottom: '20px' }}>
                    <Row gutter={16} justify="space-between" align="middle">
                        {/* 选择框，用于选择项目 */}
                        <Col>
                            <SelectProject
                                style={{ width: '160px' }}
                                selectedCity={selectedProject}
                                onCityChange={handleProjectChange}
                            />
                        </Col>
                        {/* 选择框，用于选择告警类型 */}
                        <Col>
                            <SelectDynamicType
                                style={{ width: '80px' }}
                                codeType="alarm_level_type" // 动态传入 code_type
                                value={selectedAlerType} // 使用 antd 通用的 value
                                onChange={(value) => handleAlerTypeChange(value)} // 使用 onChange 回调处理值变化
                                placeholder="请选择告警级别" // 自定义占位符（可选）
                            />
                        </Col>
                        {/* 日期范围选择器 */}
                        <Col>
                            <Space direction="vertical" size={12}>
                                <RangePicker onChange={handleDateRangeChange} />
                            </Space>
                        </Col>
                        {/* 删除选中行的按钮 */}
                        <Col>
                            <Button type="primary" onClick={handleDelete} disabled={selectedRowKeys.length === 0}>
                                已确认
                            </Button>
                        </Col>
                        {/* 右侧控件区域 */}
                        <Col style={{ marginLeft: 'auto' }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                                <Tooltip title="自动更新数据">
                                    <Switch checked={isAutoFetch} onChange={setIsAutoFetch} />
                                </Tooltip>
                                <Input
                                    type="number"
                                    placeholder="更新频次/秒"
                                    onChange={handleInputChange}
                                    style={{ width: 120 }}
                                />
                                <Tooltip title="手动更新">
                                    <Button type="primary" onClick={fetchProjectOptions}>
                                        <RedoOutlined />
                                    </Button>
                                </Tooltip>
                            </div>
                        </Col>
                    </Row>
                </div>
                <Table
                    size="small"
                    dataSource={filteredData} // 显示过滤后的数据  
                    columns={columns} // 展示的列  
                    pagination={{
                        pageSize, // 设置当前每页显示的条目数量  
                        showSizeChanger: true, // 显示页数调整器  
                        pageSizeOptions: ['10', '20', '50'], // 可选的每页条目数量  
                        onShowSizeChange: (current, size) => {
                            setPageSize(size); // 更新状态，重新渲染表格  
                        },
                    }}
                    rowKey="alarm_event_id" // 每行的唯一标识  
                    bordered // 边框样式  
                    rowSelection={rowSelection} // 选中行的设置  
                    onRow={(record) => ({
                        onClick: () => {
                            const newSelectedRowKeys = selectedRowKeys.includes(record.alarm_event_id)
                                ? selectedRowKeys.filter(key => key !== record.alarm_event_id)
                                : [...selectedRowKeys, record.alarm_event_id];
                            setSelectedRowKeys(newSelectedRowKeys); // 更新选中行的状态  
                        },
                    })}
                    style={{ width: '100%' }} // 表格宽度设为100%  
                />
            </Content>
        </Layout>
    );
};

export default App;